<template>
	<view class="login">
		<view class="title">登录</view>
		<u-form :model="form" ref="uForm">
			<u-form-item label="手机号码" prop="name" label-position="top" :required="true">
				<u-input placeholder="请输入手机号码..." maxlength="11" type="number" v-model="form.name" />
			</u-form-item>
			<!-- <u-form-item
        label="登录密码"
        prop="pwd"
        label-position="top"
        :required="true"
      >
        <u-input placeholder="请输入密码" v-model="form.pwd" type="password" />
      </u-form-item> -->
			<u-form-item label="手机验证码" prop="yzm" label-position="top" :required="true" class="yzm">
				<u-input placeholder="请输入验证码..." v-model="form.yzm" type="text" />
				<view class="hqyzm" @tap="getYzm()">{{ tips }}</view>
			</u-form-item>
		</u-form>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>
		<u-button type="primary" size="default" class="customStyle" :ripple="true" @click="toHome()">登录</u-button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { getGetcode, getLogin } from "../../request/login";
export default {
	data() {
		return {
			form: {
				// name: "18566666661",
				// name: "18559833147",
				name: "",
				pwd: "",
				yzm: "",
			},
			errorType: ["message"],
			rules: {
				name: [
					{
						min: 3,
						required: true,
						message: "请输入手机号",
						trigger: "blur,change",
					},
				],
				pwd: [
					{
						min: 5,
						required: true,
						message: "请输入密码",
						trigger: "blur,change",
					},
				],
				yzm: [
					{
						required: true,
						message: "请输入验证码",
						trigger: "blur,change",
					},
				],
			},
			tips: "获取验证码",
			seconds: 60,
		};
	},
	created() {
		if (uni.getStorageSync("user_info")) {
			uni.reLaunch({
				url: "/pages/home/index",
			});
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {
		console.log(this.$u.config.v);
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		end() {
			// this.$u.toast("倒计时结束");
		},
		start() {
			// this.$u.toast("倒计时开始");
		},
		getYzm() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: "正在获取验证码",
				});
				setTimeout(() => {
					uni.hideLoading();
					getGetcode({
						phone: this.form.name,
					}).then((res) => {
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								title: "验证码获取成功!",
								type: "success",
							});
						} else {
							this.$refs.uToast.show({
								title: res.data.result,
								type: "error",
							});
						}
					});
					this.$refs.uCode.start();
				}, 2000);
			} else {
				this.$u.toast("倒计时结束后再发送");
			}
		},
		toHome() {
			if (this.form.yzm == "") {
				this.$refs.uToast.show({
					title: "请输入验证码!",
					type: "error",
				});
			} else {
				var params = {
					phone: this.form.name,
					code: this.form.yzm,
				};
				getLogin(params).then((res) => {
					console.log(res);
					if (res.data.code == 200) {
						uni.setStorageSync("userphone", this.form.name);
						uni.setStorageSync("userpwd", this.form.pwd);
						uni.setStorageSync(
							"realname",
							res.data.result.realname
						);
						uni.setStorageSync("user_id", res.data.result.id);
						uni.setStorageSync("user_info", res.data.result);
						this.$refs.uToast.show({
							title: "登录成功!",
							type: "success",
							duration: 1000,
						});
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/home/index",
							});
						}, 1000);
					} else {
						this.$refs.uToast.show({
							title: res.data.message,
							type: "error",
							duration: 1000,
						});
					}
				});
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.login {
	padding: 0 50rpx;
	padding-top: 100rpx;

	.title {
		font-size: 66rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #272b32;
		margin-bottom: 30rpx;
	}

	.customStyle {
		margin-top: 30rpx;
	}

	.yzm {
		position: relative;

		.hqyzm {
			height: 50rpx;
			line-height: 50rpx;
			position: absolute;
			right: 20rpx;
			bottom: 30rpx;
			font-size: 22rpx;
			color: rgb(45, 186, 241);
			border-bottom: 1rpx solid rgb(45, 186, 241);
		}
	}
}
</style>
